@page "/maps/sale-maps"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the world's top 50 cities by showing the markers in their locations and clustering the markers to avoid intersecting.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to display multiple markers in the same region without intersecting each other. If a marker intersects, it will be clustered and the total number of markers will be displayed over the cluster. When zooming in, the number of clusters will be decreased, and the individual marker will be displayed. When zooming out, markers that intersect will again be clustered. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html'>MapsMarkerClusterSettings</a></code> property in layer to enable marker clustering. Tooltip is enabled in this example.</p>
   <p> More information about marker clustering can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/markers/#marker-cluster-expand'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps TooltipDisplayMode="TooltipGesture.Click">
        <MapsZoomSettings Enable="true" />
        <MapsTitleSettings Text="Sales details of products in various countries">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' TValue="string">
                <MapsShapeSettings Fill="#C1DFF5" />
                <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                    <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF" />
                </MapsMarkerClusterSettings>
                <MapsMarkerSettings>
                    <MapsMarker TValue="ProductDetails" Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="15" Width="15" DataSource="@LargestCities">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Area" Format="Name: <b>${Name}</b><br>Product: <b>${Product}</b><br>Worth: <b>${Worth} sq kms</b>" />
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="http://www.citymayors.com/statistics/largest-cities-area-125.html"
           target="_blank">www.citymayors.com</a>
    </div>
</div>

@code {
    public class ProductDetails
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public int Area { get; set; }
        public int Rank { get; set; }
        public string Name { get; set; }
        public string Product { get; set; }
        public string Worth { get; set; }
    };
    public List<ProductDetails> LargestCities = new List<ProductDetails> {
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Noah",
            Product= "Product B",
            Worth= "$150"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "William",
            Product= "Product C",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "James",
            Product= "Product D",
            Worth= "$250"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Oliver",
            Product= "Product E",
            Worth= "$350"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Benjamin",
            Product= "Product A",
            Worth= "$150"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Elijah",
            Product= "Product B",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Lucas",
            Product= "Product C",
            Worth= "$250"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Mason",
            Product= "Product D",
            Worth= "$350"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Logan",
            Product= "Product A",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Alexander",
            Product= "Product B",
            Worth= "$230"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Ethan",
            Product= "Product C",
            Worth= "$450"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Jacob",
            Product= "Product D",
            Worth= "$330"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Michael",
            Product= "Product A",
            Worth= "$120"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Daniel",
            Product= "Product B",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Henry",
            Product= "Product C",
            Worth= "$210"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Jackson",
            Product= "Product D",
            Worth= "$260"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Sebastian",
            Product= "Product A",
            Worth= "$410"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Aiden",
            Product= "Product B",
            Worth= "$220"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Matthew",
            Product= "Product C",
            Worth= "$320"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Samuel",
            Product= "Product D",
            Worth= "$540"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "David",
            Product= "Product A",
            Worth= "$350"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Joseph",
            Product= "Product B",
            Worth= "$170"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Carter",
            Product= "Product C",
            Worth= "$140"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Owen",
            Product= "Product D",
            Worth= "$320"
        },
        new ProductDetails {
            Latitude= 44.2108,
            Longitude= 20.9224,
            Area= 1623,
            Rank= 37,
            Name= "Wyatt",
            Product= "Product A",
            Worth= "$280"
        },
        new ProductDetails {
            Latitude= 22.309425,
            Longitude= 72.136230,
            Area= 1623,
            Rank= 37,
            Name= "Penelope",
            Product= "Product C",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 22.309425,
            Longitude= 72.136230,
            Area= 1623,
            Rank= 37,
            Name= "Layla",
            Product= "Product D",
            Worth= "$350"
        },
        new ProductDetails {
            Latitude= 22.309425,
            Longitude= 72.136230,
            Area= 1623,
            Rank= 37,
            Name= "Madison",
            Product= "Product A",
            Worth= "$320"
        },
        new ProductDetails {
            Latitude= 22.309425,
            Longitude= 72.136230,
            Area= 1623,
            Rank= 37,
            Name= "Aria",
            Product= "Product B",
            Worth= "$110"
        },
        new ProductDetails {
            Latitude= 35.738045,
            Longitude= 61.084488,
            Area= 1623,
            Rank= 37,
            Name= "Grayson",
            Product= "Product C",
            Worth= "$320"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Gabriel",
            Product= "Product D",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Julian",
            Product= "Product A",
            Worth= "$150"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Mateo",
            Product= "Product B",
            Worth= "$250"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Anthony",
            Product= "Product C",
            Worth= "$350"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Jaxon",
            Product= "Product D",
            Worth= "$250"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Wyatt",
            Product= "Product A",
            Worth= "$120"
        },
        new ProductDetails {
            Latitude= 41.161079,
            Longitude= -104.805450,
            Area= 1623,
            Rank= 37,
            Name= "Joshua",
            Product= "Product B",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 31.661129,
            Longitude= -88.530167,
            Area= 1623,
            Rank= 37,
            Name= "Christopher",
            Product= "Product C",
            Worth= "$190"
        },
        new ProductDetails {
            Latitude= 43.038902,
            Longitude= -87.906471,
            Area= 1623,
            Rank= 37,
            Name= "Violet",
            Product= "Product D",
            Worth= "$230"
        },
        new ProductDetails {
            Latitude= 25.989819,
            Longitude= -111.732582,
            Area= 1623,
            Rank= 37,
            Name= "Savannah",
            Product= "Product A",
            Worth= "$170"
        },
        new ProductDetails {
            Latitude= 45.3573,
            Longitude= -122.6068,
            Area= 1623,
            Rank= 37,
            Name= "Brooklyn",
            Product= "Product B",
            Worth= "$180"
        },
        new ProductDetails {
            Latitude= 60.835365,
            Longitude= -147.776749,
            Area= 1623,
            Rank= 37,
            Name= "Nathan",
            Product= "Product C",
            Worth= "$190"
        },
        new ProductDetails {
            Latitude= 64.0601273,
            Longitude= -129.4332733,
            Area= 1623,
            Rank= 37,
            Name= "Claire",
            Product= "Product D",
            Worth= "$160"
        },
        new ProductDetails {
            Latitude= 58.5975,
            Longitude= 38.9873,
            Area= 1623,
            Rank= 37,
            Name= "Isaiah",
            Product= "Product A",
            Worth= "$210"
        },
            new ProductDetails {
            Latitude= 39.9075,
            Longitude= 96.39723,
            Area= 1623,
            Rank= 37,
            Name= "Paisley",
            Product= "Product B",
            Worth= "$120"
        },
            new ProductDetails {
            Latitude= 41.20438,
            Longitude= 74.766098,
            Area= 1623,
            Rank= 37,
            Name= "Caroline",
            Product= "Product C",
            Worth= "$190"
        }
    };
}